<extend name="Public/base"/>

<block name="body">
    <style type="text/css">
    .pic_ul li {float: left; width: 100px;}
    .pic_ul li img { vertical-align: middle;}
    .pic_ul li .title, .pic_ul li .action { text-align: center; width: 100px}
    .clear { clear: both;}
    </style>
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>视频管理 <button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;"><i class="glyphicon glyphicon-share-alt"></i> 返 回</button></h2>
    </div>

    <div class="tab-wrap">
        <ul class="tab-nav nav  nav-tabs">
            <li data-tab="tab1" class="current"><a href="javascript:void(0);">基本</a></li>
            <li data-tab="tab2"><a href="javascript:void(0);">视频</a></li>
            <li data-tab="tab3"><a href="javascript:void(0);">印章</a></li>
            <li data-tab="tab4"><a href="javascript:void(0);">标签</a></li>
        </ul>
    </div>
    <div class="tab-content">
    <form action="" method="post" class="">
        <div id="tab1" class="tab-pane in tab1">
            <div class="form-item form-group">
                <label class="item-label">标题<span class="check-tips"> ( 全标题   用|分割, 前面为正常标题; 后面为附加搜索关键词,不需要分割, 其他地方均显示正常标题信息 )</span></label>
                <div class="controls">
                    <input type="text" class="form-control text input-large" name="full_title" value="{$full_title|default=$title|htmlspecialchars_decode}" />
                </div>
            </div>
            <div class="form-item form-group">
                <label class="item-label">游戏<span class="check-tips"></span></label>
                <div class="controls">
                    <select class="form-control" id="game_id" name="game_id">
                        <option value="0">---请选择---</option>
                        <volist name="options.game_id" id="op">
                        <option value="{$key}">{$op}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="form-item form-group">
                <label class="item-label">缩略图<span class="check-tips">(1280*720 jpg)</span></label>
                <div class="controls">
                    <input type="file" id="upload_picture_thumb">
                    <input type="hidden" class="text input-large" name="thumb" id="cover_id_thumb" value="{$thumb}" />
                    <div class="upload-img-box">
                    <notempty name="thumb">
                        <div class="upload-pre-item"><img class="img-thumbnail" src="__ROOT__{$thumb}"/></div>
                    </notempty>
                    </div>
                </div>   
                <script type="text/javascript">
                //上传图片
                /* 初始化上传插件 */
                $("#upload_picture_thumb").uploadify({
                    "height"          : 30,
                    "swf"             : "__STATIC__/uploadify/uploadify.swf",
                    "fileObjName"     : "download",
                    "buttonText"      : "上传图片",
                    "uploader"        : "{:U('File/uploadThumb',array('session_id'=>session_id()))}",
                    "width"           : 120,
                    'removeTimeout'   : 1,
                    'fileTypeExts'    : '*.jpeg; *.jpg; *.png; *.gif;',
                    "onUploadSuccess" : uploadpicturethumb,
                    'onFallback' : function() {
                        alert('未检测到兼容版本的Flash.');
                    }
                });
                function uploadpicturethumb(file, data){
                    var data = $.parseJSON(data);
                    var src = '';
                    if(data.status){
                        $("#cover_id_thumb").val(data.path);
                        src = data.url || '__ROOT__' + data.path
                        $("#cover_id_thumb").parent().find('.upload-img-box').html(
                            '<div class="upload-pre-item"><img src="' + src + '"/></div>'
                        );
                    } else {
                        updateAlert(data.info);
                        setTimeout(function(){
                            $('#top-alert').find('button').click();
                            $(that).removeClass('disabled').prop('disabled',false);
                        },1500);
                    }
                }
                </script>
            </div>
          
            <div class="form-item form-group">
                <label class="item-label">描述<span class="check-tips"></span></label>
                <div class="controls">
                    <label class="input-large">
                        <textarea class="textarea form-control" rows="3" name="detail">{$detail|htmlspecialchars_decode}</textarea>
                    </label>
                </div>
            </div>

            
           <!--  <div class="form-item form-group">
                <label class="item-label">视频类型<span class="check-tips"></span></label>
                <div class="controls">
                    <volist name="options.type" id="op">
                    <label class="radio">
                        <input class="JS_type" type="radio" name="type" name="type" value="{$key}"> {$op}
                    </label>
                    </volist>
                </div>
            </div>
            <div class="form-item form-group" id="match_field">
                <label class="item-label">赛事选择<span class="check-tips"></span></label>
                <div class="controls">
                    <select id="match_id" name="match_id">
                        <option value="0">---请选择---</option>
                    </select>
                </div>
            </div> -->

            <div class="form-item form-group">
                <label class="item-label">状态<span class="check-tips"></span></label>
                <label class="radio-inline" >
                <input type="radio" name="status" value="1"  /> 开启
                </label>
                <label class="radio-inline">
                <input type="radio" name="status" value="0"  /> 关闭
                </label>
            </div>

        </div>

        <div id="tab2" class="tab-pane tab2">

           <!--  <div class="form-item form-group">
                <label class="item-label">分P类型<span class="check-tips"> 选择多P后不能修改</span></label>
                <div class="controls">
                    <volist name="options.page" id="op">
                    <label class="radio">
                        <input type="radio" name="page" name="type" value="{$key}"> {$op}
                    </label>
                    </volist>
                </div>
            </div> -->

            <div class="form-item form-group">
                <label class="item-label">视频地址<span class="check-tips"></span></label>
                <div class="controls">
                    <!-- <input type="hidden" class="text input-large" name="uri" value="{:C('VIDEO_UPLOAD.uri_path')}{$uri}"> -->
                    <a target="_blank" class="js-pre-video" href="{:C('VIDEO_UPLOAD.uri_path')}{$uri}"><i class="glyphicon glyphicon-play-circle"></i> 视频预览</a>
                </div>
            </div>

            <div class="form-item form-group">
                <label class="item-label">预览视频地址<span class="check-tips"></span></label>
                <div class="controls">
                   <!--  <input type="hidden" class="text input-large" name="pre_uri" value="{:C('VIDEO_UPLOAD.uri_path')}{$pre_uri}"> -->
                    <a target="_blank" class="js-pre-video" href="{:C('VIDEO_UPLOAD.uri_path')}{$pre_uri}"><i class="glyphicon glyphicon-play-circle"></i> 视频预览</a>
                </div>
            </div>

            <div class="form-item form-group">
                <label class="item-label">视频时长<span class="check-tips"></span></label>
                <div class="controls">
                    <input type="text" class="text form-control input-small " name="time" value="{$time}">
                </div>
            </div>


        </div>

        <div id="tab3" class="tab-pane tab3">
            <ul class="pic_ul">
            <volist name="iconsOptions" id="ic">
                <li>
                    <label>
                    <input class="ids" <if condition="in_array($ic['id'], $icons)">checked</if> type="checkbox" name="icons[]" value="{$ic.id}" />
                    <img alt="{$ic.name|htmlspecialchars_decode}" title="{$ic.name|htmlspecialchars_decode}" src="__ROOT__{$ic.pic}" width="60" height="60" />
                    </label>
                    <div class="title">{$ic.name|htmlspecialchars_decode}</div>
                </li>
            </volist>
            </ul>
            <div class="clear"></div>
        </div>

        <div id="tab4" class="tab-pane tab4">
             <div class="form-item form-group">
                <label class="item-label">标签<span class="check-tips"></span></label>
                <div class="controls">
                    <volist name="options.tags" id="tag">
                        <label class="checkbox-inline">
                        <input class="checkbox" type="checkbox" name="tags[]" value="{$tag}" <in name="tag" value="$tags">checked </in> /> {$tag}
                        </label>
                    </volist>
                </div>
            </div>
        </div>

        <div class="form-item form-group row form-action">
            <div class="col-xs-3">
            <input type="hidden" name="id" value="{$id}" />
            <input type="hidden" name="uid" value="{$uid}" />
            <input type="hidden" name="type" value="{$type}" />
            <input type="hidden" name="recommend" value="{$recommend}" />
            <button class="btn submit-btn ajax-post btn-success btn-block" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            </div>
            <!-- <!-- <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button> --> -->
        </div>
    </form>
    </div>
    <div id="video-pre">
        <video controls="controls" autoplay="autoplay"></video>
    </div>
</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('Video/index')}');
        showTab();
        $('#game_id').change(function(){
            var game_id = $(this).val();
            var url = "{:U('ajax_get_matches_options')}";
            var data = {game_id: game_id};
            $.get(url, data, function(res){
                $('#match_id').empty();
                var options = '<option value="0">---请选择---</option>';
                if (res)
                {
                    $.each(res, function(index){
                        options += '<option value="'+index+'">'+res[index]+'</option>';
                    });
                }
                $('#match_id').append(options);
            });
        });

        $('.JS_type').click(function(){
            var type = $(this).val();
            if (type == 'match')
            {
                $('#match_field').show();
            }
            else
            {
                $('#match_id').val(0);
                $('#match_field').hide();
            }
        })
        var is_type = '{$type|default=normal}'
        $('#match_field').hide();
        Think.setValue("type", '{$type}');
        Think.setValue("status", '{$status}');
        Think.setValue("game_id", '{$game_id}');
        Think.setValue("match_id", '{$match_id}');
        Think.setValue("page", '{$page}');
        $('.js-pre-video').on('click',function(){
            var url=$(this).attr('href');
            // alert(url);
            $('#video-pre').addClass('show').find('video').attr('src',url);
            return false;
        });
        $('video').click(function(e){
            return false;
        });
        $('#video-pre').click(function(){
            $(this).find('video').attr('src','');
            $(this).removeClass('show');
        });
    </script>
</block>
